<template>
  <div class="alarm">
    <div class="t-con">
      <div class="t-title">
        <div v-for="(item, index) in title" :key="index" class="title-item" :style="item.style">
          {{ item.name }}
        </div>
      </div>
      <div class="tr-body" ref="alarmRef">
        <div class="tr-item no-data" v-if="data.length <= 0">暂无数据</div>
        <div
          v-for="(item, index) of data"
          :key="item.creationTime + index"
          :class="['tr-item', item.bg ? item.bg : '']"
        >
          <div class="time">
            {{ formatTime(item.creationTime, "HH:mm:ss") }}
          </div>
          <div class="barcode" :title="item.moduleName">
            {{ item.moduleName }}
          </div>
          <div class="result" :title="item.message">
            {{ item.message }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch, nextTick, computed, ref, onMounted } from "vue";
import { formatTime } from "@/utils/index.js";

let props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

let title = [
  { name: "报警时间", style: { width: "17%" } },
  { name: "报警模组", style: { width: "26%" } },
  { name: "报警信息", style: { width: "57%" } },
];
let alarmRef = ref();

// watch(data.value, (val) => {
//   let length = val.length;
//   if (length > 0) {
//     if (alarmRef.value.firstElementChild) {
//       nextTick(() => {
//         alarmRef.value.firstElementChild.scrollIntoView({
//           behavior: "smooth",
//           block: "start",
//         });
//       });
//     }
//   }
// });
</script>

<style lang="scss" scoped>
.alarm {
  width: 100%;
  height: 100%;
  overflow: hidden;
  ::-webkit-scrollbar {
    display: none;
  }
}
.t-con {
  height: 100%;
  width: 100%;
  padding: 0 5px;
  .t-title {
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    color: #ddd;
    display: flex;
    background-color: rgba(255, 255, 255, 0.2);
    .title-item {
      text-align: left;
      //   border: 1px solid;
    }
  }
  .tr-body {
    width: 100%;
    height: calc(100% - 32px);
    font-size: 14px;
    overflow: auto;
    color: #eee;
    .tr-item {
      display: flex;
      height: 30px;
      line-height: 30px;
      &:hover {
        background-color: #305c86;
      }
      .time {
        width: 17%;
      }
      .barcode {
        width: 26%;
        padding: 0 2px;
      }
      .result {
        width: 57%;
        padding: 0 2px;
      }

      > div {
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
.no-data {
  padding-left: 45%;
}
.n-s0 {
  animation: shans0 0.5s;
}

@keyframes shans0 {
  from {
    background-color: rgb(255, 255, 255);
    color: #fff;
  }

  to {
    background-color: #ff0404;
    color: #fff;
  }
}
</style>
